﻿@page "/alerts"

<h3>@Title</h3>

<h4>@SubTitle</h4>

<Block Title="@BaseUsageText" Introduction="@IntroText1">
    <Alert Color="Color.Primary">@AlertPrimaryText</Alert>
    <Alert Color="Color.Secondary">@AlertSecondaryText</Alert>
    <Alert Color="Color.Success">@AlertSuccessText</Alert>
    <Alert Color="Color.Danger">@AlertDangerText</Alert>
    <Alert Color="Color.Warning">@AlertWarningText</Alert>
    <Alert Color="Color.Info">@AlertInfoText</Alert>
    <Alert Color="Color.Dark">@AlertDarkText</Alert>
</Block>

<Block Title="@CloseButtonUsageText" Introduction="@IntroText2">
    <div>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="@WithIconUsageText" Introduction="@IntroText3">
    <Alert Icon="fa fa-check-circle" Color="Color.Success">@AlertPrimaryText</Alert>
    <Alert Icon="fa fa-warning" Color="Color.Warning">@AlertWarningText</Alert>
    <Alert Icon="fa fa-question-circle" Color="Color.Info">@AlertInfoText</Alert>
    <Alert Icon="fa fa-times-circle" Color="Color.Danger">@AlertDangerText</Alert>
</Block>

<Block Title="@ShowBarUsageText" Introduction="@IntroText4">
    <Alert ShowBar="true" Color="Color.Info">
        <div>@AlertInfoText</div>
    </Alert>
    <Alert ShowBar="true" Color="Color.Success">
        <div>@AlertSuccessText</div>
    </Alert>
    <Alert ShowBar="true" Color="Color.Primary">
        <div>@AlertPrimaryText</div>
    </Alert>
    <Alert ShowBar="true" Color="Color.Warning">
        <div>@AlertWarningText</div>
    </Alert>
    <Alert ShowBar="true" Color="Color.Danger">
        <div>@AlertDangerText</div>
    </Alert>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
